<template>
  <div class="comprehensive-form-container">
    <el-page-header @back="goBack()" />
    <el-form
      ref="formRef"
      v-loading="data.loading"
      class="demo-form"
      :disabled="data.disabled"
      label-width="100px"
      :model="data.form"
    >
      <el-form-item label="用户名">
        <el-input v-model="data.form.username" placeholder="英文名称" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="data.form.password"
          placeholder="输入密码"
          type="password"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="data.form.name" placeholder="中文姓名" />
      </el-form-item>
      <el-form-item label="手机号" prop="code">
        <el-input v-model="data.form.phone" placeholder="11位手机号" />
      </el-form-item>
      <el-form-item label="电子邮箱" prop="code">
        <el-input v-model="data.form.email" placeholder="xxx@xxx.com" />
      </el-form-item>
      <el-form-item label="角色" prop="code">
        <el-select
          v-model="data.form.role_ids"
          collapse-tags
          collapse-tags-tooltip
          multiple
          placeholder="Select"
          style="width: 240px"
        >
          <el-option
            v-for="item in data.meta.roles"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('formRef')">
          保存
        </el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
  import useForm from '@/hooks/useForm'

  const { formRef, data, resetForm, submitForm, goBack } = useForm({
    res: 'user',
    meta: true,
  })
</script>
